<template>
    <div id="headerComponent">
        <div id="logoArea">
            <div id="welcomeContent">假装这里有一个logo~</div>
            
        </div>
        <div id="emptyArea"></div>
        <div id="avatarArea">
            <el-row class="demo-avatar demo-basic">
                <el-col :span="12">
                    <div class="demo-basic--circle">
                        <div class="block">
                            <el-avatar id="userAvatar" size="large" :src="circleUrl" />
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div id="userMenu">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    @select="handleSelect"
                >
                    <el-menu-item index="1">
                        <span slot="title">注销登录</span>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    name: "headerComponent",
    data() {
        return {
            circleUrl:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            sizeList: ["large", "medium", "small"]
        };
    },
    methods: {
        handleSelect(key) {
            switch (key) {
                case "1":
                    this.logout();
                    break;
                default:
                    break;
            }
        },
        logout() {
            if(this.$cookies.get("authorization")){
                this.$cookies.remove("authorization");
            }
            this.$message({message: "注销成功",type: "success"});
            this.$router.push("/login");
        }
    }
};
</script>

<style scoped lang="scss">
#headerComponent {
    display: flex;
    #logoArea {
        display: flex;
        align-items: center;
        #welcomeContent {
            text-align: left;
            font-size: 20px;
            font-weight: bold;
        }
    }
    #avatarArea {
        flex: 0;
        position: relative;
        &:hover {
            #userMenu {
                display: block;
                position: absolute;
                top: 100%;
                right: 0%;
            }
        }
        #userMenu {
            display: none;
            z-index: 10;
        }
        .demo-avatar {
            cursor: pointer;
        }
    }
    #emptyArea {
        flex: 1;
    }
}
</style>